<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/graph.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/raphael.js"></script>
		<script src="js/popup.js"></script>
		<script src="js/mousewheel.js"></script>
		<script src="js/fsGraph.js"></script>
		<script>
			(function($){
				$(function(){
					var dataObj = {	x : [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10],
									y : [90,71,54,39,26,15,6,-1,-6,-9,-10,-9,-6,-1,6,15,26,39,54,71,90],
									hint1 : ['(-10,90)', '(-9,71)', '(-8,54)', '(-7,39)', '(-6,26)', '(-5,15)', '(-4,6)', '(-3,-1)', '(-2,-6)', '(-1,-9)', 
											'(0,-10)', '(1,-9)', '(2,-6)', '(3,-1)', '(4,6)', '(5,15)', '(6,26)', '(7,39)', '(8,54)', '(9,71)', '(10,90)'],
									hint2 : ['hint1', 'hint2', 'hint3', 'hint4', 'hint5', 'hint6', 'hint7', 'hint8', 'hint9', 'hint10', 
											'hint11', 'hint12', 'hint13', 'hint14', 'hint15', 'hint16', 'hint17'],
									color : "red"};
					$("#graph").fsGraph({	grid : true, 
											gridcolor : "#FFFFFF",
											hints : true,
											hintAnimation : 300,
											zoom : true,
											width : "640",
											height : "480",
											gap : 30,
											data : dataObj,
											pointWidth : 3,
											xScaleAdjust : -15,
											yScaleAdjust : 15,
											//range : {	x : {begin : -10, end : +5},
											//			y : {begin : -20, end : +100}}
										});
				});
			})(jQuery);
		</script>
	</head>

	<body>
		<div id="graph" class="try"></div>
		<div id="debug" class="try"></div>
	</body>
</html>